<template>
  <div class='wrapper' @click="handleGallaryClick">
    <div class="container">
      <div class="wrap">
        <swiper :options="swiperOptions">
          <swiper-slide v-for="(item,index) of imgs" :key="index">
            <img class="gallary-img" :src="item" alt="">
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'CommonGallary',
    // 接收JSON 数据
    props: {
      imgs: {
        // 传过来的值必须是数组
        type: Array,
        // 如果你不传, 则返回默认数组
        default () {
          return []
        }
      }
    },
    // 数据
    data () {
      return {
        swiperOptions: {
          pagination: '.swiper-pagination', // 初始化元素
          paginationType: 'fraction',       // 数字分页器
          observeParents: true,             // 自动刷新一次
          observer: true,                   // 监听自身、父元素发生变化就会自我刷新一次，解决宽度计算问题
        }
      }
    },
    // 方法
    methods:{
      handleGallaryClick(){
          this.$emit('close')
      }
    }
  }
</script>

<style scoped lang="stylus">
  // 定义轮播下标
  .container >>> .swiper-pagination
    overflow inherit
    color #f8f7f7
    /*bottom 1.2rem*/

/*
  .container >>> .swiper-slide
    flex-shrink 0
    width 100%!important
    height 100%
    position relative
*/

  .container
    display flex
    justify-content center
    align-items center
    z-index 2
    position fixed
    left 0
    right 0
    top 0
    bottom 0
    background #000

  .wrap
    overflow hidden



  .wrap .gallary-img
    width 100%
    max-width 100%
    height 100%
    object-fit contain




</style>
